<template>
  <div class="detail-list">
    <div class="detail-box">
      <span>设备识别号</span>
      <span>{{name}}</span>
    </div>
    <div class="detail-box">
      <span>信号</span>
      <span>{{sign}}</span>
    </div>
    <div class="detail-box">
      <span>设备状态</span>
      <span>{{devOnline}}</span>
    </div>
    <div class="detail-box" @click="editname">
      <span>修改WiFi名称</span>
      <img class="direct" src="../../assets/img/home/direct.png">
    </div>
    <!--<div class="detail-box">-->
      <!--<span>查看使用流量</span>-->
      <!--<img class="direct" src="../../assets/img/home/direct.png">-->
    <!--</div>-->
    <!--    <router-link id="phoneControl" to="/phoneControl">
          <div class="detail-box">
            <span>控制连接数</span>
            <img class="direct" src="../../assets/img/home/direct.png">
          </div>
        </router-link>-->
    <div class="detail-box" @click="reStart">
      <span>设备重启</span>
      <img class="direct" src="../../assets/img/home/direct.png">
    </div>
<!--    <div class="detail-box" @click="reStart">
      <span>限制流量</span>
      <img class="direct" src="../../assets/img/home/direct.png">
    </div>-->
<!--    <div class="detail-box" @click="reStart">
      <span>WIFI开关</span>
      <div @click="changeSwitch" class="switch" v-bind:class="[{'switch-false' : switchState}]">
        <div class="switch-button" v-bind:class="[{'switch-button-false' : switchState}]"></div>
      </div>
    </div>-->
    <div @click="pushNext" class="detail-box">
      <span>位置信息</span>
      <img class="direct" src="../../assets/img/home/direct.png">
    </div>
  </div>
</template>

<script>
import {VXDEVINFO, OPENDEV, REBOOT} from '../../api/request'
import {Toast, Confirm} from 'vue-ydui/dist/lib.rem/dialog'

export default {
  data () {
    return {
      switchState: true,
      isOnline: '',
      name: '',
      sign: '',
      devId: '',
      pwd: ''
    }
  },
  created () {
    this.devId = this.$route.query.devId
    this.name = this.devId
    this.getInfo()
  },
  computed: {
    devOnline () {
      if (this.isOnline === 2) {
        return '在线'
      } else {
        return '离线'
      }
    }
  },
  methods: {
    reStart () {
      Confirm({
        mes: '是否确认重启',
        opts: () => {
          REBOOT(this.$store.getters.uid, this.devId).then(res => {
            if (res.data.code === 200) {
              Toast({mes: '正在重启', timeout: 1000})
            } else {
              Toast({mes: res.data.msg, timeout: 1000})
            }
          })
        }
      })
    },
    pushNext: function () {
      this.$router.push({path: '/address/default?devId=' + this.devId})
    },
    changeSwitch: function () {
      OPENDEV(this.$store.getters.uid, this.devId).then(
        res => {
          let data = res.data
          if (data.code === 200) {
            this.switchState = !this.switchState
            Toast({mes: res.data.msg, timeout: 1000})
          } else {
            Toast({mes: res.data.msg, timeout: 1000})
          }
        },
        error => {
          console.log(error)
        })
    },
    editname: function () {
      console.log('传参' + this.devId)
      this.$router.push({path: '/productAccount', query: {devid: this.devId, pwd: this.pwd, name: this.name}})
    },
    getInfo: function () {
      VXDEVINFO(this.devId).then(
        res => {
          let data = res.data
          if (data.code === 200) {
            console.log(data)
            this.name = data.data.devName
            this.pwd = data.data.pwd
            this.isOnline = data.data.online
            if (this.sign === 0) {
              this.sign = '信号强'
            } else {
              this.sign = '信号弱'
            }
          } else {
            Toast({mes: res.data.msg, timeout: 1000})
          }
        },
        error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
  .detail-box {
    height: 1rem;
    line-height: 0.95rem;
    vertical-align: middle;
    color: #b0adad;
    background-color: #fff;
    font-size: 0.3rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    border-bottom: solid 1px #e4e5e6;
  }

  .detail-box span:last-child {
    float: right;
    color: #505050;
  }

  .direct {
    width: 0.17rem;
    height: 0.31rem;
    line-height: 0.95rem;
    margin-top: 0.29rem;
    float: right;
  }

  .switch {
    width: 0.95rem;
    height: 0.48rem;
    border-radius: 0.24rem;
    background-color: #38adff;
    float: right;
    margin-top: 0.30rem;
    position: relative;
    transition: background-color 0.5s;
  }

  .switch-false {
    background-color: #dddddd;
  }

  .switch-button {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    left: 0.5rem;
    top: 0.04rem;
    background-color: #fff;
    transition: left 0.5s;
  }

  .switch-button-false {
    background-color: #fff;
    left: 0.06rem;
  }
</style>
